<template>
	<view class="play-page" :style="bgStyle">
		<view class="bg"></view>
		<!-- 拔条 -->
		<view class="strip-box" :class="playState ? 'active' : ''">
			<image class="img" src="https://s3.music.126.net/mobile-new/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862=" mode=""></image>
		</view>
		<view class="content">
			<!-- 转盘图片 -->
			<view class="play-poster">
				<view class="poster-box" :class="playState ? 'play' : 'pause'">
					<image class="img" :src="curSongItem.picUrl" mode="widthFix"></image>
				</view>
			</view>
			<view class="bot">
				<!-- 上排的图标 -->
				<view class="tool-groups flex-box">
					<!-- 收藏 -->
					<view class="flex-item">
						<text class="iconfont">&#xe615;</text>
					</view>
					<!-- 下载 -->
					<view class="flex-item iconfont">
						&#xe60e;
					</view>
					<!-- 分享 -->
					<view class="flex-item iconfont">
						&#xe6ac;
					</view>
					<!-- 评论 -->
					<view class="flex-item iconfont">
						&#xe628;
					</view>
					<!-- 其它 -->
					<view class="flex-item iconfont">
						&#xe60f;
					</view>
				</view>
				<!-- 进度条 -->
				<view class="slider-bar flex-box">
					<!-- 开始时间 -->
					<view class="time start">
						{{curPlayTimeNum}}
					</view>
					<!-- 进度条  -->
					<slider class="line flex-item" :value="curPlayTime" 
					min="0"  block-size="15" :max="songLength"
					@change = "sliderChange"
					backgroundColor="rgba(255,255,255,.5)"
					activeColor="rgba(255,255,255,.5)" />
					<!-- 结束时间 -->
					<view class="time end">
						{{playTimeNum}}
					</view>
				</view>
				<!-- 下排的图标 -->
				<view class="btn-groups flex-box">
					<!-- 播放模式 -->
					<view class="flex-item" @click="setPlayModel()">
						<!-- 列表循环 -->
						<view v-if="playModel==0" class="iconfont">
							&#xe66c;
						</view>
						<!-- 随机 -->
						<view v-if="playModel==1" class="iconfont">
							&#xe66b;
						</view>
						<!-- 单曲 -->
						<view v-if="playModel==2" class="iconfont">
							&#xe66d;
						</view>
					</view>
					<!-- 上一曲 -->
					<view class="flex-item" @click="prevPlay()">
						<view class="iconfont">
							&#xe78a;
						</view>
					</view>
					<!-- 播放/暂停 -->
					<view class="play-btn" @click="play()">
						<view v-if="!playState" class="iconfont">
							&#xe638;
						</view>
						<view v-if="playState" class="iconfont">
							&#xe76a;
						</view>
					</view>
					<!-- 下一曲 -->
					<view class="flex-item" @click="nextPlay()">
						<view class="iconfont">
							&#xe7a5;
						</view>
					</view>
					<!-- 菜单 -->
					<view class="flex-item iconfont" @click="goBack()">
						&#xe634;
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	let innerAudioContext=null;
	export default {
		data() {
			return {
				playState: 0,     //播放状态  1播放  0暂停
				curId:0,
				curPlayIndex:0,    //当前播放索引
				curPlayTime:0,    //当前播放时间
				curSongItem:{},    //当前播放对象
				audioList:[],       //音乐列表
				playModel: 0,        //播放模式 0-列表循环 1-随机 2-单曲
				songLength:0,
				
			}
		},
		onLoad(options) {
			this.curPlayIndex=options.songIndex;
			this.getData();
			this.audioList=this.$store.state.playList;
		},
		computed:{
			bgStyle() {
				return 'background-image:url('+this.curSongItem.picUrl || ''+')';
			},
			curPlayTimeNum(){
				return this.$pubFn.formatTime(this.curPlayTime)
			},
			playTimeNum(){
				return this.$pubFn.formatTime(this.songLength)
			}
		},
		methods: {
			async getData(){
				this.curPlayIndex=parseInt(this.curPlayIndex);
				this.curId=this.$store.state.playList[this.curPlayIndex].id;
				this.curPlayTime=0;
				let [detail,url]=await Promise.all([
					this.$API.apiGetSongDetail({ids:this.curId}).then((res)=>{
						var songs = res.data.songs[0];
						var singer = songs.ar.map(art => {
							return art.name;
						})[0]
						return {
							name: songs.al.name,
							picUrl: songs.al.picUrl,
							singer: singer
						}
					}),
					this.$API.apiGetSongUrl({id: this.curId}).then(res=> {
						let src = res.data.data[0].url;
						if (!src) {
							uni.showToast({
								title:"播放地址不存在！"
							})
							return false;
						}
						return {src}
					})
				]);
				this.curSongItem = {...detail, ...url};
				if(this.curSongItem.src){
					this.initAudioContext()
				}else{
					uni.showToast({
						title:"音乐的url不存在"
					})
				}
			},
			
			initAudioContext(){
				if(innerAudioContext){
					// #ifdef H5
					innerAudioContext.destroy();
					// #endif
					innerAudioContext="";
				};
				// #ifdef H5
				innerAudioContext=uni.createInnerAudioContext();
				// #endif
				
				// #ifndef H5
				innerAudioContext=uni.uni.getBackgroundAudioManager();
				innerAudioContext.title=this.curSongItem.name;
				innerAudioContext.singer=this.curSongItem.singer;
				innerAudioContext.coverImgUrl=this.curSongItem.picUrl;
				// #endif
				
				innerAudioContext.src=this.curSongItem.src;
				innerAudioContext.autoplay=true;
				let timer=setInterval(()=>{
					this.songLength=innerAudioContext.duration;
					if(this.songLength){
						clearInterval(timer)
					};
				},500);
				innerAudioContext.onPlay(()=>{
					this.playState=1;
				});
				innerAudioContext.onPause(()=>{
					this.playState=0
				});
				innerAudioContext.onEnded(()=>{
					this.nextPlay();
				});
				innerAudioContext.onTimeUpdate(()=>{
					this.curPlayTime=innerAudioContext.currentTime
				})
			},
			
			play(){
				if(this.playState==0){
					innerAudioContext.play()
				}else{
					innerAudioContext.pause()
				}
			},
			
			sliderChange(e){
				this.curPlayTime=e.detail.value;
				innerAudioContext.seek(this.curPlayTime)
			},
			
			setPlayModel(){
				this.playModel=this.playModel>1?0:this.playModel+1;
				uni.showToast({
					title: ["循环播放","随机播放","单曲播放"][this.playModel]
				});
				
			},
			
			nextPlay(next=1){
				if(this.playModel==0){
					if(next){
						this.curPlayIndex=(this.curPlayIndex==this.audioList.length-1?0:this.curPlayIndex+1);
					}else{
						this.curPlayIndex=(this.curPlayIndex==0?this.audioList.length-1:this.curPlayIndex-1);
					}
				}else if(this.playModel==1){
					let random=Math.floor((Math.random()*10));
					this.curPlayIndex=random%this.audioList.length-1;
				}else{
					
				};
				this.getData()
			},
			
			prevPlay(){
				this.nextPlay(0)
			},
			
			goBack(){
				uni.navigateBack()
			}
			
			
			
			
			
			
			
		},
		
		
		
		
		
		
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		z-index: 0;
		right: 0;
		left: 0;
		height: 100%;
		width: 100%;
		filter: blur(40rpx);
		background: inherit;
		z-index:-1;
		transform:scale(1.5);
	}
	.play-page {
		position: fixed;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.slider-bar {
		color: rgba(255,255,255, .6);
		padding: 20rpx 0;
		justify-content: space-between;
		.line {
			margin: 0;
			border-radius: 2rpx;
		}
		.time{
			height: 36rpx;
			width: 80rpx;
			margin-right: 10rpx;
			font-size: 36rpx;
			line-height: 76rpx;
			transform: scale(0.5) translateY(-50%);
		}
	}
	.strip-box{
		position: absolute;
		width:100%;
		top:142rpx;
		/* #ifdef H5 */
		top:0rpx;
		/* #endif */
		height: 329rpx;
		z-index: 100;
		transform: rotate(-30deg);
		transform-origin: center 0;
		transition: transform 0.3s;
		&:before{
			position: absolute;
			content: "";
			top:-20rpx;
			left: 350rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			background: #fff;
			z-index: 100;
		}
		&.active{
			transform: rotate(0deg);
		}
		.img{
			width: 220rpx;
			height: 330rpx;
			margin-left: 340rpx;
		}
	}
	.play-poster {
		margin: 310rpx auto 0;
		/* #ifdef H5 */
		margin-top: 130rpx;
		/* #endif */
		.poster-box{
			display: flex;
			width: 616rpx;
			height:616rpx;
			margin: 0 auto;
			background: url(https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48=) center center no-repeat;
			background-size:100%;
			align-items: center;
			justify-content: center;
			animation: circling 20s linear infinite;
			&.pause{
				animation-play-state: paused;
			}
		}
		.img {
			display: block;
			margin: 0 auto;
			width: 382rpx;
			height: 382rpx;
			border: solid 16rpx rgba(0, 0, 0, .15);
			border-radius: 50%;
		}
	}
	@-webkit-keyframes circling {
		0% {
			transform: rotate(0);
		}
		100% {
			transform: rotate(1turn);
		}
	}
	.btn-groups {
		align-items: center;
		text-align: center;
		.iconfont{
			font-size: 40rpx;
		}
		.play-btn{
			position: relative;
			width:120rpx;
			height:120rpx;
			line-height: 120rpx;
			&:before{
				position:absolute;
				content:"";
				width:240rpx;
				height:240rpx;
				border:1px solid #fff;
				border-radius: 240rpx;
				transform: scale(0.5) translate(-100%,-50%);
				z-index: -1;
			}
		}
	}
	.tool-groups {
		margin-bottom: 20rpx;
		text-align: center;
		.iconfont{
			font-size: 40rpx;
		}
	}
	.title-bar {
		position: fixed;
		top:0;
		width:100%;
		height: 44px;
		margin-top: 20px;
		text-align: center;
		line-height: 44px;
		color:#fff;
		z-index: 100;
		.name {
			line-height: 50rpx;
			font-size: 28rpx;
		}
		.author {
			line-height: 1;
			font-size: 24rpx;
			color: rgba(255,255,255,.8);
		}
		.iconfont{
			width:110rpx;
			font-size: 44rpx;
		}
	}
	
	.content {
		position: fixed;
		z-index: 1;
		right: 0;
		left: 0;
		height: 100%;
		width: 100%;
		color: #FFFDEF;
		.bot {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 26rpx;
		}
	}
	.album-list {
		position: absolute;
		bottom:0;
		background: #fff;
		border-radius: 36rpx 36rpx 0 0;
		z-index: 100;
		transition: transform 0.3s;
		transform: translateY(100%);
		&.active{
			transform: translateY(0);
		}
		.list{
			height:500rpx;
			overflow-y: scroll;
		}
		.tit-bar{
			padding:10rpx;
			justify-content: space-between;
			.iconfont{
				margin-left: 16rpx;
				margin-right: 16rpx;
				font-size: 40rpx;
			}
			.play{
				line-height: 80rpx;
				color:#252621;
				font-weight: 600;
				font-size: 32rpx;
			}
			.collect{
				width:228rpx;
				height:80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				color:#fff;
				background: #fb2b21;
			}
		}
		.item {
			align-items: center;
			height: 120rpx;
		}
		.con {
			padding-right: 40rpx;
			align-items: center;
			justify-content: space-between;
		}
		.num {
			width: 84rpx;
			text-align: center;
			line-height: 120rpx;
			color: #999;
			font-size: 24rpx;
			&.on {
				color: #ff3a3a;
			}
		}
		.tit {
			margin-right: 20rpx;
			color: #333;
			line-height: 48rpx;
			font-size: 32rpx;
		}
		.count {
			margin-right: 20rpx;
			color: #ccc;
			line-height: 48rpx;
			font-size: 24rpx;
			transform: scale(0.84);
		}
		.icon {
			width: 56rpx;
			height: 20rpx;
		}
		.desc {
			color: #999;
			font-size: 24rpx;
			line-height: 40rpx;
		}
		.close{
			position: relative;
			height: 50px;
			line-height: 50px;
			text-align: center;
			&:before{
				position:absolute;
				content:"";
				top:0;
				left:0;
				width:100%;
				border-top:1px solid #ddd;
				transform: scaleY(0.5);
			}
		}
	}
</style>
